<template>
<el-row>
  <el-col :span="12">
      <!-- 商品图片，轮播图   -->
    <el-carousel height="450px">
      <el-carousel-item v-for="(pic, index) in goods.picList" :key="index ">
        <el-image
            :src="`${SERVER_ADDR}/goods/pic/${pic.url}`"
        fit="contain" style="height: 400px;width: 600px;">00000..

        </el-image>
      </el-carousel-item>
    </el-carousel>
  </el-col>
  <el-col :span="12">
    <!-- 商品基本信息   -->
    <div class="info">
      <div class="name">{{goods.name}}</div>
      <div class="dscp">{{goods.dscp}}</div>
      <div class="price">售价￥{{goods.price}}</div>
      <div class="markPrice">原价￥{{goods.markPrice}}</div>
      <div class="color"><span>颜色：{{goods.color}}</span></div>
      <div class="version"><span>版本：{{goods.version}}</span></div>
      <div class="count">库存：{{goods.count}}</div>
      <div class="score">
        <el-rate
            v-model="goods.score"
            :colors="['#FF6800', '#FF6800', '#FF6800']"
            disabled
            score-template="{value}分"
            show-score
            text-color="#FF6800"
        />
      </div>
      <div class="goodsBtn">
        <el-button size="large"type="primary" @click="insertCart"><el-icon><shopping-cart/></el-icon>加入购物车</el-button>
<!--        <el-button size="large" type="success" @click="goToCreatOrder" ><el-icon><Money></Money></el-icon>立即购买</el-button>-->
        <el-button size="large" type="info" v-if="!collectInfo" @click="collect" ><el-icon><StarFilled></StarFilled></el-icon>收藏</el-button>
        <el-button size="large" type="danger" v-else @click="cancelCollect" ><el-icon><Star></Star></el-icon>取消收藏</el-button>
      </div>
    </div>
  </el-col>
</el-row>
  <el-row>
    <div class="my-reply" style="width: 600px">
      <el-avatar class="header-img" :size="40"></el-avatar>
      <div class="reply-info" >
        <div
            tabindex="0"
            contenteditable="true"
            id="replyInput"
            spellcheck="false"
            placeholder="输入评论..."
            class="reply-input"
            @focus="showReplyBtn"
            @input="onDivInput($event)"
        >
        </div>
      </div>
      <div class="reply-btn-box">
        <el-button class="reply-btn" size="large" type="primary">发表评论</el-button>
      </div>
    </div>
  </el-row>
  <el-row>
    <!-- 商品详情/评价 -->
    <el-tabs type="border-card" model-value="first" class="demo-tabs">
      <el-tab-pane label="商品详情" name="first" v-html="goods.detail"></el-tab-pane>
      <!--评价-->
      <el-tab-pane label="商品评价" name="second">
        <div>
          <div class="author-title reply-father">
            <el-avatar class="header-img" :size="40" ></el-avatar>
            <div class="author-info">
              <span class="author-name">用户名父</span>
              <span class="author-time">2024年4月1日 14:30</span>
            </div>
            <div class="icon-btn">
              <span><el-rate allow-half disabled /></span>
            </div>
            <div class="talk-box">
              <p>
                <span class="reply">456</span>
              </p>
            </div>
            <div class="reply-box">
              <div  class="author-title">
                <el-avatar class="header-img" :size="40" ></el-avatar>
                <div class="author-info">
                  <span class="author-name">用户名子</span>
                  <span class="author-time">2024年4月1日 14:30</span>
                </div>
                <div class="icon-btn">
                  <span><el-rate allow-half disabled /></span>
                </div>
                <div class="talk-box">
                  <p>
                    <span>回复 用户名父:</span>
                    <span class="reply">546</span>
                  </p>
                </div>
                <!--<div class="reply-box">-->

                <!--</div>-->
              </div>
            </div>
          </div>
        </div>
        <div class="my-reply" style="width: 600px">
          <el-avatar class="header-img" :size="40"></el-avatar>
          <div class="reply-info" >
            <div
                tabindex="0"
                contenteditable="true"
                id="replyInput"
                spellcheck="false"
                placeholder="输入评论..."
                class="reply-input"
                @focus="showReplyBtn"
                @input="onDivInput($event)"
            >
            </div>
          </div>
          <div class="reply-btn-box">
            <span><el-rate allow-half /></span>
            <el-button class="reply-btn" size="large" type="primary">发表评论</el-button>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-row>
</template>

<script setup>
import {ref} from "vue";
import goodsApi from "@/api/goodsApi.js";
import {useRoute, useRouter} from "vue-router";
import {Money, ShoppingCart, Star, StarFilled} from "@element-plus/icons-vue";
import collectApi from "@/api/CollectApi.js";
import {ElMessage, ElMessageBox} from "element-plus";
import {useTokenStore} from "@/stores/token.js";
import cartApi from "@/api/cartApi.js";
import router from "@/router/index.js";
const tokenStore = useTokenStore();
//服务器的地址
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR);
const route = useRoute();
// const router = useRouter();
//需要显示的商品
const goods = ref({});
//商品收藏的状态
const collectInfo = ref(null);

function selectByid(){
  let id = route.query.id
  //跳转到商品详情页
  goodsApi.selectById(id)
  .then(resp => {
    goods.value = resp.data
    //获取当前商品收藏的情况
    if(tokenStore.token){
      getCollectInfo();
    }

  })
}
function getCollectInfo(){
  //获取当前商品收藏的情况
  collectApi.selectByGoodsIdAndUserId(goods.value.id)
  .then(resp => {
    collectInfo.value = resp.data
  })
}
//收藏
function collect(){
  collectApi.insert(goods.value.id)
  .then(resp => {
    if (resp.code == 10000){
      ElMessage.success(resp.msg)
      //刷新
      getCollectInfo();
    } else {
      ElMessage.error(resp.msg)
    }
  });
}
//取消收藏
function cancelCollect(){
  collectApi.delete(collectInfo.value.id)
  .then(resp => {
    if (resp.code == 10000){
      ElMessage.success(resp.msg)
      //刷新
      getCollectInfo();
    } else {
      ElMessage.error(resp.msg)
    }
  });
}
//加入购物车
function insertCart(){
  cartApi.insert(goods.value.id)
  .then(resp => {
    if (resp.code == 10000){
      ElMessageBox.confirm('加入购物车成功，是否前往购物车查看？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      }).then(() => {
        // 点击确定，前往购物车
        router.push("/user/cart");
      })

    } else {
      ElMessage.error(resp.msg)
    }
  });
}
// function goToCreatOrder(){
//   //获取已选择的商品的id
//   let goodsId = route.query.id
//   router.push({
//     path: "/user/creatOrder",
//     query:{
//       goodsId
//     }
//
//   })
// }
selectByid();
</script>

<style scoped>
.el-carousel {
  margin: 15px 0px;
  border: 1px solid #AAA  ;
}
.info {
  margin: 15px 25px;
}
.info div {
  margin-bottom: 15px;
}
.info .name {
  font-size: 30px;
  font-weight: bold;
}
.info .dscp {
  color: #ff4949;
}
.info .price {
  color: var(--theme-color);
  font-size: 18px;
}
.info .markPrice {
  color: #0e1c7f;
  text-decoration: line-through;
}
.info span {
  display: inline-block;
  border: 2px solid var(--theme-color);
  border-radius: 5px;
  line-height: 30px;
  padding: 5px;
  background-color: #eeeeee;

}
el-icon{
  margin-right: 3px;
}

</style>